<template>
	<view>
		<view class="header_box status_bar">
			<view class="message_box">
				<view class="title">— {{commonData.HeadSloganA}}{{commonData.HeadSloganB}}{{commonData.HeadSloganC}}</view>
				<view class="other_box">
					<view class="other iconfont" data-index="0" @tap="setEwm">&#xe601;</view>
					<view class="other iconfont" data-index="1" @tap="setEwm">&#xe882;</view>
					<view class="other iconfont" data-index="2" @tap="setEwm">&#xe8db;</view>
				</view>
			</view>
			<view class="header">
				<view class="logo" data-url="/pages/index/index" @click="gotopage">
					<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
				</view>
				<view class="more" @tap="autoListPage" v-if="!pupu">
					<image src="../../static/more.png" mode="widthFix"></image>
				</view>
				<view class="more" @tap="autoListPage" v-if="pupu">
					<image src="../../static/close.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<view class="pupu_box" v-if="pupu02" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<image :src="IMG_Api+code.wechat" mode="widthFix" v-if="ewmIndex == 0"></image>
				<image :src="IMG_Api+code.qq_code" mode="widthFix" v-if="ewmIndex == 1"></image>
				<image :src="IMG_Api+code.trill" mode="widthFix" v-if="ewmIndex == 2"></image>
			</view>
		</view>
		<view class="nav_pupu" v-if="pupu">
			<view class="nav_box" :class="pupu == false ? 'nav_index' : ''">
				<!-- <view class="close iconfont" @tap="autoListPage">&#xe69f;</view> -->
				<view class="nav_list">
					<view class="list" data-index="0" :data-url="nav[0].url" @tap="selectMenu">
						<view class="name">{{nav[0].text}}</view>
					</view>

					<view class="list" :class="me == true ? 'menuColor' : ''" data-index="1" @tap="selectMenu">
						<view class="name" :class="me == true ? 'menuColor' : ''">{{nav[1].text}}</view>
						<view class="arrow iconfont" v-if="me == false">&#xe6f3;</view>
						<view class="arrow iconfont menuColor" v-if="me == true">&#xf230;</view>
					</view>

					<view class="me_list" v-if="me == true">
						<block v-for="(item, index) in nav[1].junior">
							<view class="me_t" :data-url="item.url" @click="gotopage">{{item.text}}</view>
						</block>
					</view>

					<view class="list" :class="system == true ? 'menuColor' : ''" data-index="2" @tap="selectMenu">
						<view class="name" :class="system == true ? 'menuColor' : ''">{{nav[2].text}}</view>
						<view class="arrow iconfont" v-if="system == false">&#xe6f3;</view>
						<view class="arrow iconfont menuColor" v-if="system == true">&#xf230;</view>
					</view>


					<view class="system_box" v-if="system">
						<view class="system_auto">
							<view class="system_content" v-for="(item, index) in systemData">
								<view class="title">
									<view class="icon iconfont" :class="item.icon"></view>
									<view class="text">{{item.title}}</view>
								</view>
								<view class="value_box">
									<view class="value" v-for="(item02, index02) in item.value"
										:class="item02.color == true ? 'systemColor01' : ''" :data-index01="index"
										:data-index02="index02" :data-url="'/pages/index/system?id='+item02.id" @tap="setSystemValue">
										<view class="name" :class="item02.color == true ? 'systemColor02' : ''">
											{{item02.name}}
										</view>
										<view class="text" :class="item02.color == true ? 'systemColor02' : ''">
											{{item02.text}}
										</view>
									</view>
								</view>
							</view>


						</view>
					</view>

					<view class="list" data-index="3" :data-url="nav[3].url" @tap="selectMenu">
						<view class="name">{{nav[3].text}}</view>
					</view>

					<view class="list" data-index="4" :data-url="nav[4].url" @tap="selectMenu">
						<view class="name">{{nav[4].text}}</view>
					</view>

					<view class="list" data-index="5" :data-url="nav[5].url" @tap="selectMenu">
						<view class="name">{{nav[5].text}}</view>
					</view>


				</view>
			</view>
		</view>
		<view class="clear_box"></view>

		<view class="banner_box">
			<image :src="IMG_Api+info.mobile_image" mode="widthFix"></image>
		</view>
		

		<view class="page_content" v-if="introduce.length > 0">
			<view class="page_title">
				<view class="content content02">
					<view class="text">{{info.summarize_phrase}}</view>
					<view class="line"></view>
					<view class="title">{{info.summarize_title}}</view>
					<view class="text">{{info.summarize_desc}}</view>
				</view>
			</view>

			<view class="b2c_box">
				<image :src="IMG_Api+info.summarize_image" mode="widthFix"></image>
			</view>

		</view>

		<view class="page_content02">
			<view class="page_title">
				<view class="content content02">
					<view class="title">{{info.business_title}}</view>
					<view class="text">{{info.business_desc}}</view>
				</view>
			</view>

			<view class="business_box">
				<block v-for="(item, index) in info.business_content">
					<view class="business">
						<image :src="IMG_Api+item.image" mode="widthFix"></image>
						<view class="text">{{item.text}}</view>
					</view>
				</block>
			</view>
			<view class="consult"  @click="gotopage" data-url="/pages/telephone/telephone">在线咨询</view>

		</view>

		<view class="page_content">
			<view class="page_title">
				<view class="content content02">
					<view class="text">{{info.advantage_phrase}}</view>
					<view class="line"></view>
					<view class="title">{{info.advantage_title}}</view>
				</view>
			</view>

			<view class="case_nav02" v-if="advantage_content.length > 0">
				<block v-for="(item, index) in advantage_content">
					<view class="menu" :class="caseset02 == index ? 'caseColor02' : ''" :data-index="index"
						@tap="setCaseColor02">{{item.name}}</view>
				</block>
			</view>
			
			

			<view class="service_box" v-if="advantage_content.length > 0">
				<view class="service_auto">
					<view class="service">
						<view class="title">{{advantage_content[caseset02].title}}</view>
						<view class="line"></view>
						<view class="text">{{advantage_content[caseset02].desc}}</view>
			
					</view>
				</view>
				<view class="service_img">
					<image :src="IMG_Api+advantage_content[caseset02].image" mode="widthFix"></image>
				</view>
			</view>

			<view class="page_title">
				<view class="content content02">
					<view class="title">{{info.worth_title}}</view>
				</view>
			</view>

			<view class="service_box02">
				<view class="service_auto">
					<view class="service" v-for="(item, index) in info.worth_content">
						<view class="icon">
							<image :src="IMG_Api+item.image" mode="widthFix"></image>
						</view>
						<view class="title">{{item.title}}</view>
						<view class="line"></view>
						<view class="text">{{item.desc}}</view>						
					</view>
				</view>
			</view>

			<view class="page_title">
				<view class="content content02">
					<view class="title">{{info.feature_title}}</view>
				</view>
			</view>

			<view class="business_box02">
				<block v-for="(item, index) in info.feature_content">
					<view class="business">
						<image :src="IMG_Api+item.image" mode="widthFix"></image>
						<view class="title">{{item.title}}</view>
						<view class="text">{{item.desc}}</view>
					</view>
				</block>
			</view>
			<view class="consult" @click="gotopage" data-url="/pages/telephone/telephone">在线咨询</view>

		</view>

		<view class="page_content02">
			<view class="play_box">
				<view class="play" v-for="(item, index) in info.code_content">
					<view class="play_img">
						<image :src="IMG_Api+item.image" mode="widthFix"></image>
						<view class="play_text">{{item.desc}}</view>
					</view>
					<view class="play_title">{{item.title}}</view>
				</view>
			</view>
			
			<view class="consult" @click="gotopage" data-url="/pages/telephone/telephone">在线咨询</view>

		</view>

		<view class="page_content">
			<view class="page_title">
				<view class="content content02">
					<view class="title">{{info.case_title}}</view>
				</view>
			</view>

			<view class="case_box">
				<view class="case" v-for="(item, index) in info.case_content">
					<image :src="IMG_Api+item.map_image" :data-url="'/pages/case/details?id='+item.id" @click="gotopage" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="consult" @click="gotopage" data-url="/pages/telephone/telephone">在线咨询</view>

		</view>
		<view class="footer_box">
			<view class="logo" data-url="/pages/index/index" @click="gotopage">
				<image :src="IMG_Api+commonData.logo" mode="widthFix"></image>
			</view>
			<view class="name">{{commonData.company_profile}}</view>
			<view class="phone">{{commonData.hot_lineText}}+{{commonData.contact_number}}</view>
			<view class="nav_list">
				<view class="list" data-index="0" @tap="selectMenu02">
					<view class="name">{{commonData.firm}}</view>
					<view class="arrow iconfont" v-if="me02 == false">&#xe6f3;</view>
					<view class="arrow iconfont" v-if="me02 == true">&#xf230;</view>
				</view>
				<view class="me_list" v-if="me02 == true">
					<block v-for="(item, index) in categoryBottom.bottomFirm" :key="index">
						<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
					</block>
				</view>
				<view class="list" data-index="1" @tap="selectMenu02">
					<view class="name">{{commonData.quickLink}}</view>
					<view class="arrow iconfont" v-if="link == false">&#xe6f3;</view>
					<view class="arrow iconfont" v-if="link == true">&#xf230;</view>
				</view>
				<view class="me_list" v-if="link == true">
					<block v-for="(item, index) in categoryBottom.quickLink" :key="index">
						<view class="me_t" :data-url="item.url" @click="gotopage">{{item.name}}</view>
					</block>
				</view>
				<view class="title">{{commonData.newsletter}}</view>
				<view class="name">{{commonData.describeA}}</view>
				<view class="search_box">
					<view class="search">
						<input type="text" value="" placeholder="请输入联系电话" v-model="bottomPhone" />
					</view>
					<view class="menu iconfont" @tap="phoneSubmitFun">&#xeb08;</view>
				</view>
				<view class="friendship">
					<view class="text">{{commonData.titleWord}}</view>
					<view class="friend">
						<block v-for="(item, index) in commonData.externalLink" :key="index">
							<a class="icon iconfont" :href='item.desc' target="_blank" :class="item.icon"></a>
						</block>
					</view>
				</view>
				<view class="edition">{{commonData.copyright}} {{commonData.corporation}}
					<a style="color:#7A7A7A;" href='https://beian.miit.gov.cn/'
						target="_blank">{{'&nbsp'+commonData.beian}}</a>
				</view>
			</view>
		</view>

		<view class="fenestra" v-if="fenestra">
			<view class="menu iconfont" @tap="goPageTop">&#xf230;</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				caseset02: 0,
				fenestra: false,
				pupu: false,
				me: false,
				me02: false,
				link: false,
				system: false,
				navlist: [{
						text: '首页',
						url: '/pages/index/index',
					},
					{
						text: '关于我们',

					},
					{
						text: '产品服务'
					},
					{
						text: '案例展示',
						url: '/pages/case/case',
					},
					{
						text: '新闻资讯',
						url: '/pages/news/news',
					},
					{
						text: '联系我们',
						url: '/pages/telephone/telephone',
					}

				],
				systemData: [{
						icon: 'icon-dianpu',
						title: 'B2C电商系统',
						value: [{
								name: '助农电商系统',
								text: '多种销售模式的电商系统',
								color: true,
								url: '/pages/index/system'
							},
							{
								name: '众筹电商系统',
								text: '基于购物赠送门票或积分众筹电商',
								color: false,
								url: '/pages/index/system'
							},
							{
								name: '艺术教培系统',
								text: '艺术教育行业',
								color: false,
								url: '/pages/index/system'
							}
						]
					},
					{
						icon: 'icon-ERPxitong',
						title: '跨境ERP电商系统',
						value: [{
								name: '网络货运系统',
								text: '运输管理结算系统',
								color: false,
								url: '/pages/index/system'
							},
							{
								name: '抢单拍卖系统',
								text: '通过拍商品卖转售议价',
								color: false,
								url: '/pages/index/system'
							},
						]
					},
					{
						icon: 'icon-cgcrmxitong',
						title: 'CRM客户管理系统',
						value: [{
							name: '抖音订单管理系统',
							text: '通过抖店接口，订单接入系统',
							color: false,
							url: '/pages/index/system'
						}, ]
					},
					{
						icon: 'icon-yidong',
						title: '移动端管理系统',
						value: [{
								name: '垃圾分类回收系统',
								text: '互联网+环保回收+便民超市模式',
								color: false,
								url: '/pages/index/system'
							},

						]
					}
				],
				business: [{
						icon: '../../static/menus/menu05.png',
						text: '商城团购',
					},
					{
						icon: '../../static/menus/menu06.png',
						text: '餐饮美食',
					},
					{
						icon: '../../static/menus/menu07.png',
						text: '日用百货',
					},
					{
						icon: '../../static/menus/menu08.png',
						text: '家电数码',
					},
					{
						icon: '../../static/menus/menu09.png',
						text: '酒店住宿',
					},
					{
						icon: '../../static/menus/menu10.png',
						text: '生鲜水果',
					},
					{
						icon: '../../static/menus/menu11.png',
						text: '珠宝轻奢',
					},
					{
						icon: '../../static/menus/menu12.png',
						text: '鲜花烘焙',
					},
					{
						icon: '../../static/menus/menu13.png',
						text: '服装配件',
					},
					{
						icon: '../../static/menus/menu14.png',
						text: '房产建材',
					},
					{
						icon: '../../static/menus/menu15.png',
						text: '运动户外',
					},
					{
						icon: '../../static/menus/menu16.png',
						text: '更多',
					}
				],
				business02: [{
						icon: '../../static/menus/menu20.png',
						title: '入驻流程申请',
						text: '平台可以为供货商提供专业的入驻流程，审核完成后即可成为供货商',
					},
					{
						icon: '../../static/menus/menu21.png',
						title: '批发商品发布',
						text: '供货商可以发布批发商品，针对商品的不同购买数量设置批发价',
					},
					{
						icon: '../../static/menus/menu22.png',
						title: '批发商品分享',
						text: '供货商可以将批发商品分享给平台的采购商，让采购商可以直接销售',
					},
					{
						icon: '../../static/menus/menu23.png',
						title: '会员制分销',
						text: '用户付费成为高级会员，并享受推广分拥权利，解决平台流量增长难题。',
					},
					{
						icon: '../../static/menus/menu24.png',
						title: '供货商智能结算',
						text: '按照周期可以申请佣金结算，平台审核完成后将佣金转给供货商',
					},
					{
						icon: '../../static/menus/menu25.png',
						title: '多类型客户管理',
						text: '消费者、采购商、批发商均可通过后台组织统一管理运营',
					},
					{
						icon: '../../static/menus/menu26.png',
						title: '满足大额支付结算',
						text: '根据需求可开发对接大额支付方式，满足商家的大批量采购付款',
					},
					{
						icon: '../../static/menus/menu27.png',
						title: '多种营销模块',
						text: '拼团、砍价、秒杀、积分等多种营销功能帮助商家精准运营，提高下单率',
					}
				],
				caseNav02: [{
						text: '多用户商城',
					},
					{
						text: '线上线下联合商城',
					},
					{
						text: '积分制会员零售',
					},
					{
						text: '多级分销商城',
					},

				],
				pupu02: false,
				ewmIndex: 0,
				nav: [],
				systemData: [],
				IMG_Api:'',
				commonData:'',
				code:'',
				categoryBottom:[],
				bottomPhone:'',
				selected: 0,
				categoryData:'',
				info:'',
				advantage_content:[],
				introduce:[],
				caseset: 0,
				
				id:0,

				
			}
		},
		onLoad(e) {
			let that = this;
			if(e.id){
				that.id = e.id;
			}
			that.loadData();
		},
		onShow() {
			let that = this;
			that.system = false;
			that.me = false;
		},
		methods: {
			autoPupu() {
				let that = this;
				that.pupu02 = !that.pupu02;
			},
			setEwm(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.ewmIndex = index;
				that.pupu02 = !that.pupu02;
			},
			loadData() {
			  let that = this;
			  that.Net._get('news/productService',{gid:that.id}, res => {
			    if(res.code == 1){
					uni.setNavigationBarTitle({
					     title: res.data.info.name // 修改为你想要的标题
					   });
					that.commonData = res.data.common;
					that.code = res.data.code;
					that.nav = res.data.category;
					that.selected = res.data.categoryData.check_id;
					that.categoryData = res.data.categoryData;
					that.systemData = res.data.goodsclass;
					that.categoryBottom = res.data.categoryBottom;
					that.info = res.data.info;
					that.advantage_content = res.data.info.advantage_content;
					that.introduce = res.data.info.introduce;
					
					that.IMG_Api = this.Cfg.Setting.img;
			    }
			  });
			},
			phoneSubmitFun() {
				let that = this;
				let _data = {
					phone: that.bottomPhone,
					type: '1',
				}
				that.Net._post('news/contentSubmission', _data, res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2800
						})
						setTimeout(function() {
							that.bottomPhone = '';
						}, 1000)
					}
				});
			},
			setCaseColor(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.caseset = index;
			},
			setCaseColor02(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.caseset02 = index;
			},
			goPageTop() {
				let that = this;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			setSystemValue(e) {
				let that = this;
				let index01 = e.currentTarget.dataset.index01;
				let index02 = e.currentTarget.dataset.index02;
				this.systemData.forEach(item => {
					item.value.forEach(item02 => {
						this.$set(item02, 'color', false);
					});
				});
				that.systemData[index01].value[index02].color = true;

				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});

			},
			selectMenu(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 1) {
					that.me = !that.me;
				}

				if (number_ == 2) {
					that.system = !that.system;
				}

				if (number_ != 1 || number_ != 2) {
					let url = e.currentTarget.dataset.url;
					uni.navigateTo({
						url: url
					});
				}


			},
			selectMenu02(e) {
				let that = this;
				let number_ = e.currentTarget.dataset.index;

				if (number_ == 0) {
					that.me02 = !that.me02;
				}

				if (number_ == 1) {
					that.link = !that.link;
				}



			},
			autoListPage() {
				let that = this;
				that.pupu = !that.pupu;
			},
			gotopage(e) {
				var that = this;
				let url = e.currentTarget.dataset.url;
				//console.log(e);
				uni.navigateTo({
					url: url
				});
			},
			backPage() {
				uni.navigateBack({});
			}
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 800) {
				this.fenestra = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 800) {
				this.fenestra = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		}
	}
</script>

<style>
	.banner_box {
		width: 100%;
		position: relative;
	}

	.banner_box image {
		width: 100%;
	}

	.b2c_box {
		margin-top: 4vw;
		width: 100%;
	}

	.b2c_box image {
		width: 100%;
	}

	.business_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 8vw;
	}

	.business_box::after {
		flex: auto;
		content: '';
	}

	.business_box .business {
		width: 25%;
		margin-bottom: 4%;
		text-align: center;
	}

	.business_box .business image {
		width: 14vw;
	}

	.business_box .business .text {
		font-size: 3.6vw;
		color: #333;
		margin-top: 2vw;
	}

	.business_box02 {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 8vw;
	}

	.business_box02::after {
		flex: auto;
		content: '';
	}

	.business_box02 .business {
		width: 48%;
		margin-bottom: 4%;
		margin-left: 4;
		text-align: center;
	}

	.business_box02 .business:nth-child(2n + 1) {
		margin-left: 0;
	}

	.business_box02 .business image {
		width: 18vw;
	}

	.business_box02 .business .title {
		font-size: 3.8vw;
		font-weight: bold;
		color: #333;
		margin-top: 4vw;
	}

	.business_box02 .business .text {
		font-size: 3.2vw;
		color: #8F918F;
		margin-top: 3vw;
		padding: 0 2vw;
		line-height: 6vw;
	}

	.consult {
		width: 40vw;
		margin: 8vw auto;
		height: 13.5vw;
		background-color: #3476FF;
		font-size: 3.8vw;
		border-radius: 1vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.case_nav02 {
		width: 100%;

		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-bottom: 5vw;
		margin-top: 5vw;
	}

	.case_nav02::after {
		flex: auto;
		content: '';
	}



	.case_nav02 .menu {
		width: 48%;
		height: 100%;
		height: 13vw;
		line-height: 13vw;
		font-size: 3.5vw;
		color: #202124;
		text-align: center;
		border: 1px solid #EDEFF2;
		border-radius: 1vw;
		margin-left: 4%;
		margin-top: 4%;
	}

	.case_nav02 .menu:nth-child(2n + 1) {
		margin-left: 0;
	}

	.caseColor02 {
		background-color: #F0F7FF;
		color: #024CB0 !important;
		font-weight: bold;
		border: none;
	}

	.service_box {
		width: 100%;
		margin: 0 auto;
		margin-top: 4vw;

	}

	.service_box .service_auto {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	/* .service_box .service_auto::after {
		flex: auto;
		content: '';
	} */

	.service_box .service_auto .service {
		flex: 1;
		margin-left: 4%;
		margin-bottom: 4%;
	}

	.service_box .service_auto .service:nth-child(3n + 1) {
		margin-left: 0;
	}

	.service_box .service_auto .service .icon {
		width: 4vw;
	}

	.service_box .service_auto .service .icon image {
		width: 100%;
	}

	.service_box .service_auto .service .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}

	.service_box .service_auto .service .text {
		font-size: 3.5vw;
		color: #333;
		margin-top: 3vw;
		line-height: 6vw;
	}

	.service_box .service_auto .service .line {
		width: 10vw;
		background-color: #0076BB;
		height: 2px;
		margin: 4vw 0;
	}

	.service_box .service_img {
		width: 100%;
		margin: 3vw auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service_box .service_img image {
		width: 80%;
	}

	.service_box02 {
		width: 100%;
		margin: 0 auto;
		margin-top: 8vw;
		display: flex;
		align-items: center;

	}

	.service_box02 .service_auto {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-right: 3vw;
	}

	.service_box02 .service_auto::after {
		flex: auto;
		content: '';
	}

	.service_box02 .service_auto .service {
		width: 30.66666%;
		margin-left: 4%;
		margin-bottom: 4%;
	}

	.service_box02 .service_auto .service:nth-child(3n + 1) {
		margin-left: 0;
	}

	.service_box02 .service_auto .service .icon {
		width: 16vw;
		margin: 0 auto;
	}

	.service_box02 .service_auto .service .icon image {
		width: 100%;
	}

	.service_box02 .service_auto .service .title {
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}

	.service_box02 .service_auto .service .text {
		font-size: 3vw;
		color: #333;
		margin-top: 2vw;
		text-align: center;
		line-height: 6vw;
	}

	.service_box02 .service_auto .service .line {
		width: 10vw;
		height: 2px;
		margin: 3vw auto 0;
	}

	.service_box02 .service_auto .service:nth-child(1) .line {
		background-color: #FF8545;
	}

	.service_box02 .service_auto .service:nth-child(2) .line {
		background-color: #8E95FF;
	}

	.service_box02 .service_auto .service:nth-child(3) .line {
		background-color: #38C98C;
	}

	.service_box02 .service_img {
		width: 20vw;
		height: 20vw;
		border-radius: 50%;
		background-color: #0762CB;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service_box02 .service_img image {
		width: 100%;
	}

	.play_box {
		width: 38vw;
		margin: 4vw auto 0;
	}

	.play_box .play {
		width: 100%;
		margin-bottom: 6vw;
	}


	.play_box .play .play_img {
		width: 100%;
		background-color: #fff;
		border: 1px solid #E6E6E6;
		padding: 3vw;
	}

	.play_box .play .play_img image {
		width: 100%;
	}

	.play_box .play .play_img .play_text {
		font-size: 3.2vw;
		color: #999999;
		text-align: center;
		margin-top: 2vw;
	}

	.play_box .play .play_title {
		font-size: 3.8vw;
		color: #000018;
		text-align: center;
		margin-top: 3vw;
	}

	.case_box {
		width: 100%;
		margin-top: 8vw;
	}

	.case_box .case {
		width: 100%;
		margin-bottom: 4%;
	}

	.case_box .case image {
		width: 100%;
	}
</style>